<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">
        <span v-if="type=='add'">新增</span>
        <span v-if="type=='update'">编辑</span>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         商品类型:
      </el-col>
      <el-col :span="7">
        <template>
          <el-select 
            v-model="goodsType"
            clearable
            @change="onGetName"
            placeholder="请选择商品类型">
            <el-option
              v-for="item in goodsTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         商品名称:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请选择商品名称" v-model="ad_jumpValue" :readonly="is_modifly" @focus="onGetJump"></el-input>
        <!-- <template>
          <el-select 
            v-model="goodsName"
            clearable
            placeholder="请选择商品名称">
            <el-option
              v-for="item in goodsNameList"
              :key="item.GOODS_ID"
              :label="item.GOODSNAME"
              :value="item.GOODS_ID">
            </el-option>
          </el-select>
        </template> -->
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        开始时间:
      </el-col>
      <el-col :span="7">
        <el-date-picker
          v-model="startTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始时间">
        </el-date-picker>  
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        结束时间:
      </el-col>
      <el-col :span="7">
        <el-date-picker
          v-model="endTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="结束时间">
        </el-date-picker>  
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         促销价格:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入促销价格" v-model="price" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         限购数量:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入限购数量" v-model="allNumber" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         每人限购数量:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入每人限购数量" v-model="number" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         排序(升序):
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入排序(升序)" v-model="ORDERBY" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         删除标记:
      </el-col>
      <el-col :span="7">
        <template>
          <el-select 
            v-model="deleteSign"
            clearable
            placeholder="请选择刪除标志">
            <el-option
              v-for="item in deleteSignList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="7" :offset="3">
        <el-button type="primary" class="myBgGreen" v-if="type=='update' && isShow(204)" @click="onEditGoods">保 存</el-button>
        <el-button type="primary" class="myBgGreen" v-if="type=='add'" @click="onCreate">新 增</el-button>
        <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
      </el-col>
    </el-row>
    
    <!--选择跳转值弹出框 start-->
    <el-dialog title="选择跳转值" class="myRoleDialog" :visible.sync="newJumpValueDialog" >
      <div>
        <el-input placeholder="输入关键字进行搜索" v-model="kw_jump" class="input-with-select">
          <el-button type="primary" slot="append" class="el-icon-search" @click="onSearch"></el-button>
        </el-input>
      </div>
      <div class="myPaddingTop_10px">
        <el-tree
          class="myOV_y_400px" 
          ref="jumpDlg"
          v-loading="jumpDlgListLoading"
          :data="jumpDlgList"
          :props="jumpDlgProps"
          node-key="GOODS_ID"
          :render-content="renderContent"
          @check-change="onChange"
          :filter-node-method="filterNode"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newJumpValueDialog = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onAssignSub">提 交</el-button>
      </div>
    </el-dialog>
    <!--选择跳转值弹出框 end-->
  </div>
</template>
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myMarginBottom_10px{
    margin-bottom: 20px;
  }
  .myOV_y_400px{
    max-height: 400px;
    min-height: 200px;
    overflow-y:scroll;
    border:1px solid #f2f2f2;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
</style>
<script>
  import { getName , addGoods , getGoodsDetail , editGoods } from '@/api/online';
  import qs from "querystring";
  export default {
    data(){
      return{
        title: "超实惠商品管理",
        id: "",
        is_modifly:false,
        type:"",
        ad_name:"",
        goodsType:"",
        goodsTypeList:[{label:"超市商品",value:1},{value:2,label:"餐饮商品"},{value:3,label:"团购商品"}],
        goodsName:"",
        goodsNameList:[],
        startTime:"",
        endTime:"",
        price:"",
        deleteSign:"",
        deleteSignList:[{value:0,label:"未删除"},{value:1,label:"已删除"}],
        number:"",
        allNumber:"",
        ORDERBY:"",

        newJumpValueDialog:false,
        kw_jump:"",
        jumpDlgListLoading:false,
        jumpDlgProps: {
          children: 'children',
          label: 'GOODSNAME'
        },
        jumpDlgList:[],
        isShowJump:false,
        jumpName:"",
        jumpId:"",
        ad_jumpValue:""
      }
    },
    components: {
        
    },
    watch: {
      kw_jump(val) {
        this.$refs.jumpDlg.filter(val);
      }
    },
    created(){
      document.title=this.title;
      this.type = this.$route.query.type;
      this.id = this.$route.query.id;
      if(this.type=='add'){

      }
      if(this.type=='update'){
        this.onGetGoodsDetail();
      }
      
    },
    methods:{
      filterNode(value, data) {
        if (!value) return true;
        return data.GOODSNAME.indexOf(value) !== -1;
      },     
      onAssignSub(){//提交跳转值
        let vm=this;
        var jump = vm.$refs.jumpDlg.getCheckedNodes();
        if (jump.length > 0) {
          vm.jumpName = jump[0].GOODSNAME;
          vm.jumpId = jump[0].GOODS_ID;
        }else{
          vm.jumpName = "";
          vm.jumpId = "";
        }       
        vm.ad_jumpValue=vm.jumpName;
        vm.newJumpValueDialog = false;
      },
      onChange(a,b,c){
        let vm=this;
        if(b){
          vm.$refs.jumpDlg.setCheckedKeys([]);
          vm.$refs.jumpDlg.setCheckedKeys([a.GOODS_ID]);
        }else{
          vm.$refs.jumpDlg.setCheckedKeys([]);
        }
      },
      onGetJump(){
        let vm=this;
        let params={
          GOODSTYPE:vm.goodsType
        }
        vm.jumpDlgListLoading=true;
        getName(params).then(response => {
          let res=response.data;
          vm.newJumpValueDialog=true;
          vm.jumpDlgList=res.OBJECT;
          vm.jumpDlgListLoading=false;
          setTimeout(function(){
            vm.$refs.jumpDlg.setCheckedKeys([vm.jumpId]);
          },100)
        }).catch(error => {
          vm.jumpDlgListLoading=false;
        })
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
              title:`店铺名称：${node.data.STORENAME}`
            }
          },
          [
            createElement('span', node.label),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `[${node.data.SPECIFICATIONS}]`
            )
          ]
        );
      },
      onGetJump_edit(jump){
        let vm=this;
        let params={
          GOODSTYPE:vm.goodsType
        }
        getName(params).then(response => {
          let res=response.data.OBJECT;
          for(let i=0; i<res.length; i++){
            if(res[i].GOODS_ID==jump){
              vm.ad_jumpValue=res[i].GOODSNAME;
              vm.jumpName=res[i].GOODSNAME;
              vm.jumpId=res[i].GOODS_ID;
            }
          }
        }).catch(error => {
          
        })
      },
      onSearch(){

      },     
      onEditGoods(){
        let vm=this;
        let params={
          PROMOTION_ID:vm.id,
          GOODSTYPE:vm.goodsType,
          GOODS_ID:vm.jumpId,
          BEGINTIME:vm.startTime,
          ENDTIME:vm.endTime,
          PROMOTIONPRICE:vm.price,
          AMOUNT:vm.allNumber,
          SINGLEIDMAX:vm.number,
          ORDERBY:vm.ORDERBY,
          DELETED:vm.deleteSign
        }
        editGoods(qs.stringify(params)).then(response => {
          this.$message.success('执行成功！');
          this.$router.go(-1);
        }).catch(error => {
          this.$message.error('执行失败！');
        })
      },
      onGetName(){
        let vm=this;
        vm.ad_jumpValue="";
        vm.jumpName = "";
        vm.jumpId = "";
      },
      onBack(){
        this.$router.go(-1);
      },
      onCreate(){//新增
        let vm=this;
        let params={
          GOODSTYPE:vm.goodsType,
          GOODS_ID:vm.jumpId,
          BEGINTIME:vm.startTime,
          ENDTIME:vm.endTime,
          PROMOTIONPRICE:vm.price,
          AMOUNT:vm.allNumber,
          SINGLEIDMAX:vm.number,
          ORDERBY:vm.ORDERBY,
          DELETED:vm.deleteSign
        }
        addGoods(qs.stringify(params)).then(response => {
          let res=response.data;
          vm.$message.success("添加数据成功！");
          vm.$router.go(-1);
        }).catch(error => {
          vm.$message.error("添加数据失败！");
        })
      },
      onGetGoodsDetail(){//拉取促销商品详细
        let vm=this;
        let params={
          PROMOTION_ID:vm.id
        }
        getGoodsDetail(params).then(response => {
          let res=response.data.OBJECT;
          vm.goodsType=res.GOODSTYPE;
          vm.goodsName=res.GOODS_ID;
          vm.startTime=res.BEGINTIME;
          vm.endTime=res.ENDTIME;
          vm.price=res.PROMOTIONPRICE;
          vm.allNumber=res.AMOUNT;
          vm.number=res.SINGLEIDMAX;
          vm.ORDERBY=res.ORDERBY;
          vm.deleteSign=res.DELETED;
          vm.onGetJump_edit(res.GOODS_ID);
        }).catch(error => {
        })
      }
      
      

    }
  
  }


</script>



